<!--
  - Copyright (c) 2019.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
    <div>
        <el-select popper-class="ft-customer-select" :disabled="disabled"
                   v-if="editable" v-model="customerInfo" value-key="customerId"
                   :placeholder="placeholder" filterable
                   :loading="loading"
                   @change="selectCustomer" :clearable="clearable"
                   @visible-change="onvisible"
                   :popper-append-to-body="false" >
            <el-option
                v-for="item in customerList"
                :key="item.customerId"
                :label="item.customerName"
                :value="item">
                <div>
                    <span>{{item.customerName}}</span>
                    <span style='color:#8492a6'>{{item.identityNo}}</span>
                </div>
            </el-option>
        </el-select>
        <span v-if="!editable&&customerInfo">{{customerInfo.customerName}}</span>
    </div>
</template>

<script>
export default {
    name: "FtCustomer",
    props: {
        placeholder: {
            type: String,
            default: '请输入客户名称'
        },
        value: {
            type: String
        },
        editable: {
            type: Boolean,
            default: true
        },
        disabled: {
            type: Boolean,
            default: false
        },
        clearable: {
            type: Boolean,
            default: false
        },
        popperAppendToBody: {
            type: Boolean,
            default: true
        },
        customerInitId: {
          type: String,
          require: true
        }
    },
    mounted() {
        this.request()
    },
    data() {
        return {
            customerList: [],
            customerInfo: null,
            customerId: this.value,
            loading:false
        }
    },
    methods: {
        request(filter) {
            this.loading = true
            this.filter=this.customerInitId
            let url = "/joys-rest/ncls-bms/approval/query/"
            this.$http.post(url,this.filter).then(resp => {
                this.customerList = resp.body
                this.merge()
            }).catch(err => {
                if(err.body) {
                    this.$message.error(err.body.message || "客户查询失败！")
                } else {
                    this.$message.error("客户查询失败！")
                }
            }).finally(() => {
                this.loading = false
            })
        },
        crearData(){
            this.customerInfo = {};
        },

      onvisible(){
        this.request()
      },

        loadCustomer() {
            this.customerInfo = null
            if (this.customerId) {
                const url = '/joys-rest/ncls-bms/approval/custInfo/' + this.customerId
                this.$http.get(url).then(resp => {
                    this.customerInfo = resp.body
                    this.merge()
                }, resp => {
                    this.$message.error(resp.body.message)
                })
            }
        },
        selectCustomer() {
            this.customerId = this.customerInfo.customerId
            this.$emit('input', this.customerInfo.customerId)
            this.$emit('change', this.customerInfo)
        },
        merge() {
            this.customerId && this.customerList.find((item) => {
                if (item.customerId === this.customerId) {
                    this.customerInfo = item

                }
            })
        },
        dataModify(){
            this.customerInfo = {}
        }
    },
    watch: {
        value(newVal) {
            this.customerId = newVal
            this.merge()
        }
    }
}
</script>

<style>
.ft-customer-select .el-select-dropdown__item {
    padding: 4px 20px;
    font-size: 14px;
    line-height: 21px;
    height: auto;
    
}
.el-select-dropdown__item div span{
    display:block;
}
 
</style>
